<!DOCTYPE HTML
    PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <title>添加Popup标注</title>
    <!-- <base href="/"> -->
    <link href="css/ol.css" rel="stylesheet" type="text/css" />
    <script src="libs/ol.js" type="text/javascript"></script>
    <style type="text/css">
        body,
        html {
            border: none;
            padding: 0;
            margin: 0;
        }

        #menu {
            width: 100%;
            height: 20px;
            padding: 5px 10px;
            font-size: 14px;
            font-family: "微软雅黑";
            left: 10px;
            text-align: center;
        }

        #mapCon {
            width: 100%;
            height: 680px;
            position: relative;
        }
        #map .ol-mouse-position{            /* 拾取坐标控件样式 */
            color: crimson;
            font-size: 20px;
        }

        .ol-popup {
            position: absolute;
            background-color: white;
            -webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
            padding: 15px;
            border-radius: 10px;
            border: 1px solid #cccccc;
            bottom: 45px;
            left: -50px;
        }

        .ol-popup:after,
        .ol-popup:before {
            top: 100%;
            border: solid transparent;
            content: " ";
            height: 0;
            width: 0;
            position: absolute;
            pointer-events: none;
        }

        .ol-popup:after {
            border-top-color: white;
            border-width: 10px;
            left: 48px;
            margin-left: -10px;
        }

        .ol-popup:before {
            border-top-color: #cccccc;
            border-width: 11px;
            left: 48px;
            margin-left: -11px;
        }

        .ol-popup-closer {
            text-decoration: none;
            position: absolute;
            top: 2px;
            right: 8px;
        }

        .ol-popup-closer:after {
            content: "✖";
        }

        #popup-content {
            font-size: 14px;
            font-family: "微软雅黑";
        }

        #popup-content .markerInfo {
            font-weight: bold;
        }
    </style>
</head>

<body>
    <div id="menu" style="font-weight:bold">
        鼠标单击标注点，弹出Popup标注
    </div>
    <div id="mapCon">
        <!-- Popup -->
        <div id="popup" class="ol-popup">
            <a href="#" id="popup-closer" class="ol-popup-closer"></a>
            <div id="popup-content">
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var zafu = [13327559,3536910];
        //示例标注点浙江农林大学的信息对象
        var featuerInfo = {
            geo: zafu,
            att: {
                //标注信息的标题内容
                title: "浙江农林大学（省部共建高校）",
                //标注详细信息链接
                titleURL: "http://www.openlayers.org/",
                //标注内容简介
                text: "浙江农林大学（zafu），简称浙农林大，一个读书做学问的好地方……",
                //标注的图片
                imgURL: "img/zafu (1).jpg"
            }
        }

        /**
        * 实例化Map对象加载地图,默认底图加载天地图
        */
        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    title: "天地图矢量图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=e33757cdce9295f804cb6c77aa22afe3",
                        wrapX: true
                    })
                }),
                new ol.layer.Tile({
                    title: "天地图矢量注记图层",
                    source: new ol.source.XYZ({
                        url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=e33757cdce9295f804cb6c77aa22afe3",
                        wrapX: true
                    })
                })
            ],
            target: 'mapCon',
            view: new ol.View({
                center: zafu,
                zoom: 4
            }),
            controls: ol.control.defaults().extend([
                new ol.control.MousePosition({          //坐标拾取控件及属性
                    //className默认为 ol-mouse-position
                    coordinateFormat: ol.coordinate.createStringXY(4),
                    projection: 'EPSG:4490',
                    target: document.getElementById('mouse-Position'),
                    undefinedHTML: '&nbsp;'
                })
            ])

        });

        /**
        * 创建标注样式函数,设置image为图标ol.style.Icon
        * @param {ol.Feature} feature 要素
        */
        var createLabelStyle = function (feature) {
            return new ol.style.Style({
                image: new ol.style.Icon(
                    /** @type {olx.style.IconOptions} */
                    {
                        //设置图标点
                        anchor: [0.5, 60],
                        //图标起点
                        anchorOrigin: 'top-right',
                        //指定x值为图标点的x值
                        anchorXUnits: 'fraction',
                        //指定Y值为像素的值
                        anchorYUnits: 'pixels',
                        //偏移
                        offsetOrigin: 'top-right',
                        // offset:[0,10],
                        //图标缩放比例
                        // scale:0.5,
                        //透明度
                        opacity: 0.75,
                        //图标的url
                        src: 'img/校徽 (2).png'
                    }),
                text: new ol.style.Text({
                    //位置
                    textAlign: 'center',
                    //基准线
                    textBaseline: 'middle',
                    //文字样式
                    font: 'normal 14px 微软雅黑',
                    //文本内容
                    text: feature.get('name'),
                    //文本填充样式（即文字颜色）
                    fill: new ol.style.Fill({ color: '#aa3300' }),
                    stroke: new ol.style.Stroke({ color: '#ffcc33', width: 2 })
                })
            });
        }

        //实例化Vector要素，通过矢量图层添加到地图容器中
        var iconFeature = new ol.Feature({
            //坐标点
            geometry: new ol.geom.Point(zafu),
            //名称属性
            name: '浙江农林大学',
            //大概人口数（万）
            population: 2115
        });
        iconFeature.setStyle(createLabelStyle(iconFeature));
        //矢量标注的数据源
        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });
        //矢量标注图层
        var vectorLayer = new ol.layer.Vector({
            source: vectorSource
        });
        map.addLayer(vectorLayer);

        /**
        * 实现popup的html元素
        */
        var container = document.getElementById('popup');
        var content = document.getElementById('popup-content');
        var closer = document.getElementById('popup-closer');

        /**
        * 在地图容器中创建一个Overlay
        */
        var popup = new ol.Overlay({
            //要转换成overlay的HTML元素
            element: container,
            //当前窗口可见
            autoPan: true,
            //Popup放置的位置
            positioning: 'bottom-center',
            //是否应该停止事件传播到地图窗口
            stopEvent: false,
            autoPanAnimation: {
                //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度
                duration: 250
            }
        });
        map.addOverlay(popup);

        /**
        * 添加关闭按钮的单击事件（隐藏popup）
        * @return {boolean} Don't follow the href.
        */
        closer.onclick = function () {
            //未定义popup位置
            popup.setPosition(undefined);
            //失去焦点
            closer.blur();
            return false;
        };

        /**
        * 动态创建popup的具体内容
        * @param {string} title
        */
        function addFeatrueInfo(info) {
            //新增a元素
            var elementA = document.createElement('a');
            elementA.className = "markerInfo";
            elementA.href = info.att.titleURL;
            //elementA.innerText = info.att.title;
            setInnerText(elementA, info.att.title);
            // 新建的div元素添加a子节点
            content.appendChild(elementA);
            //新增div元素
            var elementDiv = document.createElement('div');
            elementDiv.className = "markerText";
            //elementDiv.innerText = info.att.text;
            setInnerText(elementDiv, info.att.text);
            // 为content添加div子节点
            content.appendChild(elementDiv);
            //新增img元素
            var elementImg = document.createElement('img');
            elementImg.className = "markerImg";
            elementImg.src = info.att.imgURL;
            // 为content添加img子节点
            content.appendChild(elementImg);
        }
        /**
        * 动态设置元素文本内容（兼容）
        */
        function setInnerText(element, text) {
            if (typeof element.textContent == "string") {
                element.textContent = text;
            } else {
                element.innerText = text;
            }
        }

        /**
        * 为map添加点击事件监听，渲染弹出popup
        */
        map.on('click', function (evt) {
            //判断当前单击处是否有要素，捕获到要素时弹出popup
            var feature = map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) { return feature; });
            if (feature) {
                //清空popup的内容容器
                content.innerHTML = '';
                //在popup中加载当前要素的具体信息
                addFeatrueInfo(featuerInfo);
                if (popup.getPosition() == undefined) {
                    //设置popup的位置
                    popup.setPosition(zafu);
                }
            }
        });
        /**
        * 为map添加鼠标移动事件监听，当指向标注时改变鼠标光标状态
        */
        map.on('pointermove', function (e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';
        });
    </script>
</body>

</html>